本文內容

本文內容為閱讀有關 Angular Route 的 pathMatch 設定的筆記內容。

空白路徑設定 (path: '')

之前有關紀錄 pathMatch 的筆記內容，橫跨了 prefix, full 和 redirect 這幾種設定和行為。
今天，要來記錄一下有關 path 設定為''時的行為。

空白路徑的比對機制

當path: '' 時，它符合任何路由片段，且它不會"消耗"當下被比對的路由片段。
什麼意思呢? 讓我們來舉個範例吧
[Route - 路由設定]

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'users',
        component: UsersComponent,
      }
    ]
  },
  {
    path: 'users',
    component: CounterUsersComponent,
  },
];

假設我們今天的比對路徑是 /users，
那它先遇到的第一個 Route 物件的路由設定為 path:''，承如上面所說的比對機制，它符合任何被比對路由的片對，所以，過關。
接下來，我們有提到空白的路由不會消耗被比對路由片段，所以~~~~~ 現在的被比對路由路徑還是保持在 /users 的內容。
所以，我們就用 /users 來比對它的子路由路徑設定 path: 'users'，而且它的 pathMatch 是 prefix ，只需符合當下片段，也剛好被比對路由只有 /users，users === users，故最終被渲染到畫面上的元件內容是 UsersComponent。

搭配 pathMatch:full 和 redirectTo 使用

現在我們將 pathMatch:full 和 redirectTo 跟 path: ''混用
[Route - 路由設定]

const routes: Routes = [
  {
    path: 'login',
    component: loginComponent
  },
  {
    path: '',
    pathMatch: 'full'
    redirectTo: 'login'
  },
  {
    path: 'users',
    component: usersComponent
  }
];

假設被比對的路徑是 http://localhost:4200/，那我們來比對一下上面的路由設定
第一關，path: 'login'，login !== ''，不符合。
第二關，path: ''，空白路徑可以符合所以路由片段且不消耗它，所以，過關。
而且 pathMatch:full 的比對策略要一次較符合所有的路徑，但現在的路徑也是空白路徑，所以，過關。
接著，它有 redirectTo: 'login'，故路由會被轉換到 http://localhost:4200/login ，最終是 loginComponent 的元件內容會被渲染到畫面上。

空白路徑和 redirectTo 造成的路由循環錯誤

上面的範例，如果我們將 path: '' 的位置拉到 path: 'login' 的上面，讓空白路徑的設定變成第一個，而 path: '' 的設定又可以符合任何路由片段，然後，又被 redirectTo 重新導向路由，讓路由比對的流程不段的重頭開始比對，但是，第一關就又遇到 path: ''，導致這種無限輪迴的路由問題，這要特別注意喔~

path: '**' 萬用路由

當 path 設定為 '**' 它可以符合任何路由路徑，不管它的 pathMatch 設定是不是 full，都是完全符合，什麼意思呢?
寫個例子
[Route 設定]

const route: Route = [
  {
    path: 'login',
    component: loginComponent
  },
  {
    path: '**',
    redirectTo: 'login'
  }
]

當比對路徑為 /users/Johnny/permission，它遇到
第一關 path: 'login'，而它的 pathMatch 是 prefix，所以，它必須符合當下的路由片段，login !== users，不符合。
第二關，path: '**'，它可以符合任何的路由，所以，也不用分割被比對路由路徑了，過關。所以，路由會因為 redirectTo 被導引到 login，最終，是 loginComponent 元件的內容會被渲染到畫面上囉。

那也因為 path:'**' 這個萬用路由的特性，若它搭配 rediretTo 的話，我們也要避免無限路由迴圈的問題喔。

Summary

做個總結

1. path:'' 可以符合任何被比對路由路徑的片段，而且不會消耗被比對路由路徑的片段。
2. path:'**' 可以直接符合整個被比對路由路徑。
3. 以上兩個路由的設定都要避免無線路由迴圈的問題。

Reference

1. Introduce about Angular Route pathMatch Setting
2. Angular Route API - officailDoc